<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            color: tan;
            padding: 10px 15px;
            margin: 12px 0;
            background: #f0f0f0;
            border: 1px dotted #333;
            font: 12px/1.5 "微软雅黑";
            word-wrap: break-word;
        }
    </style>
    <script>
        window.onload = function(){
            var div = document.getElementsByTagName("div");
            var inputs = document.getElementsByTagName("input");
            var i = 0;
            var s1 = s2 = true;
            var temp = [];
            //删除/添加第一项
            inputs[0].onclick = function(){
                temp = getArray(div[0].innerHTML);
                s1 ? 
                //删除第一项 shift()方法
                (temp.shift(),this.value = this.value.replace("删除","添加"),s1 = false) :
                //添加第一项 unshift()方法
                (temp.unshift("a(1)"),this.value = this.value.replace("添加","删除"),s1 = true);
                //输出   join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的
                div[0].innerHTML = temp.join();
            };
            //删除/添加最后一项
            inputs[1].onclick = function(){
                temp = getArray(div[0].innerHTML);
                s2?
                //删除最后一项 pop()方法
                (temp.pop(),this.value = this.value.replace("删除","添加"),s2 = false):
                //添加最后一项 push()方法
                (temp.push("l(12)"),this.value = this.value.replace("添加","删除"),s2 = true);
                //输出
                div[0].innerHTML = temp.join();
            };
            //复制 concat()方法
            inputs[2].onclick = function(){
                temp = getArray(div[1].innerHTML);
                //输出
                div[1].innerHTML = temp.concat(temp).toString().replace(/\s/g,"")
            };
            //还原  利用数组length特点
            inputs[3].onclick = function(){
               temp = getArray(div[1].innerHTML);
                //设置数组长度
               temp.length = 4;
                //输出
                div[1].innerHTML =temp.join();
            };
            //第三组数据还原
            inputs[4].onclick = function(){
               temp = ["red","green","blue","white","yellow","black","brown"];
                //输出
                div[2].innerHTML =temp.join();
            };
            //删除前三项
            inputs[5].onclick = function(){
               temp = getArray(div[2].innerHTML);
                //删除 0开始  删除3个 splice 从数组中添加/删除项目,然后返回被删除的项目
               temp.splice(0,3);
               //输出
               div[2].innerHTML = temp.join();
            }
            //删除第二至第三项
            inputs[6].onclick = function(){
               temp = getArray(div[2].innerHTML);
                //删除 2开始 删除2个
               temp.splice(1,2);
                //输出
                div[2].innerHTML =temp.join();
            };
            //在第二项后面插入'orange','tan'
            inputs[7].onclick = function(){
               temp = getArray(div[2].innerHTML);
                //插入  2开始  插入'orange','tan'
               temp.splice(1,0,'orange','tan');
                //输出
                div[2].innerHTML =temp.join();
            };
            //替换第二项和第三项
            inputs[8].onclick = function(){
                temp = getArray(div[2].innerHTML);
                //插入 2开始替换
              temp.splice(1,2,"#ccc","#fff");
                //输出
                div[2].innerHTML = temp.join();
            };
            //将div中内容转为数组
            //str  div对象
            function getArray(str){
              temp.length = 0;
                //split() 方法用于把一个字符串分割成字符串数组
                str = str.split(",")
                for(var i in str)temp.push(str[i]);
                return temp;
            }
        }
    </script>
</head>

<body>
    <div>
        a(1),b(2),c(3),d(4),e(5),f(6),g(7),h(8),i(9),j(10),k(11),l(12)
    </div>
    <input type="button" value="删除a(1)" />
    <input type="button" value="删除l(12)" />
    <div>0,1,2,3</div>
    <input type="button" value="复制" />
    <input type="button" value="还原" />
    <div>red,green,blue,white,yellow,black,brown</div>
    <input type="button" value="还原" />
    <input type="button" value="删除前三项" />
    <input type="button" value="删除第二至三项" />
    <input type="button" value="在第二项后插入(orange, tan)" />
    <input type="button" value="替换第二项和第三项" />

</body>

</html>